<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>StarScream Tutorial</title>
<link rel="stylesheet" type="text/css" href="handout.css" />

<body>
<div id="info">
    <div id="title">StarScream Tutorial</div>
    <div id="author">Feihong Hsu</div>
    <div id="venue">http://starscream-slideshow.googlecode.com</div>
    <div id="location">Interweb</div>
    <div id="date">March 30, 2007</div>
</div>
<div class="section">
<h1>What Is StarScream?</h1>
<p>StarScream lets you write your entire presentation using <a class="reference" href="http://docutils.sourceforge.net/rst.html">reStructuredText</a>.</p>
<p>Presentations made with StarScream are web pages that can be displayed in any modern web browser.</p>
<div class="notes">
<p>Because you write your entire presentation in plain text, you can focus on your content, and not worry too much about the visual presentation.</p>
<p>One big advantage of StarScream is that if your laptop dies before your talk, you can borrow somebody else's laptop and the presentation will still look the same. Sweet!</p>
</div>
</div>
<div class="section">
<h1>Features</h1>
<ul class="simple">
<li>Generates slides AND handouts</li>
<li>Dynamic text zoom</li>
<li>Syntax highlighting for code blocks</li>
<li>Customizable through CSS</li>
<li>Not fugly</li>
</ul>
<div class="notes">
<p>Slides and handouts are generated as two separate files.</p>
<p>The slides are generated into an HTML file called <tt class="docutils literal"><span class="pre">slides.html</span></tt>. The actual contents of every slide are put into a separate file called <tt class="docutils literal"><span class="pre">slides.js</span></tt>.</p>
<p>Handouts are generated as a single HTML file called <tt class="docutils literal"><span class="pre">handout.html</span></tt>.</p>
</div>
</div>
<div class="section">
<h1>A Tour of StarScream</h1>
<ul class="simple">
<li>Key controls</li>
<li><tt class="docutils literal"><span class="pre">info</span></tt>, <tt class="docutils literal"><span class="pre">code</span></tt>, <tt class="docutils literal"><span class="pre">cssfile</span></tt></li>
<li>Lists, tables, images</li>
<li>Raw HTML</li>
<li>Command line usage</li>
</ul>
</div>
<div class="section">
<h1>Key Controls</h1>
<p>The slide show is completely controlled through key presses:</p>
<table border="1" cellpadding="15">
<colgroup>
    <col width="20%"/>
    <col width="80%"/>
</colgroup>
<tbody valign="top">
<tr>
<td>
<tt class="docutils literal">
<span class="pre">
j
</span>
</tt>
</td>
<td>
next slide
</td>
</tr>
<tr>
<td>
<tt class="docutils literal">
<span class="pre">
k
</span>
</tt>
</td>
<td>
previous slide
</td>
</tr>
<tr>
<td>
<tt class="docutils literal">
<span class="pre">
-
</span>
</tt>
</td>
<td>
decrease text size
</td>
</tr>
<tr>
<td>
<tt class="docutils literal">
<span class="pre">
=
</span>
</tt>
</td>
<td>
increase text size
</td>
</tr>
</tbody>
</table><div class="notes">
<p>The <tt class="docutils literal"><span class="pre">+</span></tt> key can also be used to increase text size (but most laptops don't have a standalone <tt class="docutils literal"><span class="pre">+</span></tt> key).</p>
<p>Starscream's control system is designed to be useful even when you have to speak while holding a microphone and have only one free hand.</p>
<p>Why doesn't StarScream use the arrow keys or page(up|down) keys? Because in StarScream, those keys are used for scrolling. Slides in StarScream are not limited to the size of your display.</p>
</div>
</div>
<div class="section">
<h1>The info Directive</h1>
<div class="highlight"><pre>.. info::

    author = Feihong Hsu
    venue = Chicago Python Users Group
    location = Chicago, USA
    date = April 10, 2007
</pre></div>
<div class="notes">
<p>The <tt class="docutils literal"><span class="pre">info</span></tt> directive is a way of specifying the metadata for a presentation. The information you provide to this directive is used to generate the title slide.</p>
</div>
</div>
<div class="section">
<h1>The code Directive</h1>
<div class="highlight"><pre>.. code:: xml

    &lt;StackPanel Margin="5"&gt;
        &lt;Label Margin="5"&gt;This is a label&lt;/Label&gt;

        &lt;ListBox Name="list" Margin="5"/&gt;

        &lt;ComboBox Name="combo" Margin="5" /&gt;

        &lt;CheckBox Name="check" Margin="5"&gt;Check box&lt;/CheckBox&gt;

        &lt;StackPanel Margin="5" Orientation="Horizontal"&gt;
            &lt;RadioButton Margin="5"&gt;X-Ray&lt;/RadioButton&gt;
            &lt;RadioButton Margin="5"&gt;Yoyo&lt;/RadioButton&gt;
            &lt;RadioButton Margin="5" IsChecked="true"&gt;Zebra&lt;/RadioButton&gt;
        &lt;/StackPanel&gt;
    &lt;/StackPanel&gt;
</pre></div>
<div class="notes">
<p>In addition to common programming languages, the <tt class="docutils literal"><span class="pre">code</span></tt> directive also supports various markup languages. See <a class="reference" href="http://pygments.org/languages/">here</a> for the full list of supported languages.</p>
</div>
</div>
<div class="section">
<h1>The code Directive</h1>
<div class="highlight"><pre><span class="nt">&lt;StackPanel</span> <span class="na">Margin=</span><span class="s">"5"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;Label</span> <span class="na">Margin=</span><span class="s">"5"</span><span class="nt">&gt;</span>This is a label<span class="nt">&lt;/Label&gt;</span>

    <span class="nt">&lt;ListBox</span> <span class="na">Name=</span><span class="s">"list"</span> <span class="na">Margin=</span><span class="s">"5"</span><span class="nt">/&gt;</span>

    <span class="nt">&lt;ComboBox</span> <span class="na">Name=</span><span class="s">"combo"</span> <span class="na">Margin=</span><span class="s">"5"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;CheckBox</span> <span class="na">Name=</span><span class="s">"check"</span> <span class="na">Margin=</span><span class="s">"5"</span><span class="nt">&gt;</span>Check box<span class="nt">&lt;/CheckBox&gt;</span>

    <span class="nt">&lt;StackPanel</span> <span class="na">Margin=</span><span class="s">"5"</span> <span class="na">Orientation=</span><span class="s">"Horizontal"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;RadioButton</span> <span class="na">Margin=</span><span class="s">"5"</span><span class="nt">&gt;</span>X-Ray<span class="nt">&lt;/RadioButton&gt;</span>
        <span class="nt">&lt;RadioButton</span> <span class="na">Margin=</span><span class="s">"5"</span><span class="nt">&gt;</span>Yoyo<span class="nt">&lt;/RadioButton&gt;</span>
        <span class="nt">&lt;RadioButton</span> <span class="na">Margin=</span><span class="s">"5"</span> <span class="na">IsChecked=</span><span class="s">"true"</span><span class="nt">&gt;</span>Zebra<span class="nt">&lt;/RadioButton&gt;</span>
    <span class="nt">&lt;/StackPanel&gt;</span>
<span class="nt">&lt;/StackPanel&gt;</span>
</pre></div>
<div class="notes">
<p>This is what we see when the markup from the previous slide is applied.</p>
</div>
</div>
<div class="section">
<h1>The code Directive</h1>
<div class="highlight"><pre>.. code:: html
    :file: code/keypress.html
</pre></div>
<div class="notes">
<p>You can directly reference files. The <tt class="docutils literal"><span class="pre">code</span></tt> directive will insert the contents of the file into the presentation.</p>
</div>
</div>
<div class="section">
<h1>The cssfile Directive</h1>
<div class="highlight"><pre><span class="p">..</span> <span class="ow">cssfile</span><span class="p">::</span> <span class="k">custom.css</span>
</pre></div>
<div class="notes">
<p>You specify links to your own CSS files using the <tt class="docutils literal"><span class="pre">cssfile</span></tt> directive. You will often use this directive in conjunction with <a class="reference" href="http://docutils.sourceforge.net/rst.html">reStructuredText</a>'s built-in <tt class="docutils literal"><span class="pre">class</span></tt> directive (you'll see an example of this later on).</p>
</div>
</div>
<div class="section">
<h1>Lists</h1>
<ul class="simple">
<li>This is my first point</li>
<li>This is my second point<ol class="arabic">
<li>This is point A</li>
<li>This is point B</li>
<li>This is point C</li>
</ol>
</li>
<li>This is my third point</li>
</ul>
<div class="notes">
<p>The markup that generates the above is:</p>
<div class="highlight"><pre><span class="m">-</span> This is my first point
<span class="m">-</span> This is my second point

  <span class="m">#.</span> This is point A
  <span class="m">#.</span> This is point B
  <span class="m">#.</span> This is point C

<span class="m">-</span> This is my third point
</pre></div>
</div>
</div>
<div class="section">
<h1>Tables</h1>
<style>
    table.example-table {
        border-collapse: collapse;
        background-color: white;
        border: 1px solid black;
        }
    table.example-table th {
        background-color: blue;
        border: 4px solid black;
        color: white;
        }
    table.example-table td {
        padding: 0 5px 0 5px;
        border: 1px solid black;
        }
</style><table border="1" class="example-table docutils">
<colgroup>
<col width="43%"/>
<col width="21%"/>
<col width="18%"/>
<col width="18%"/>
</colgroup>
<thead valign="bottom">
<tr><th class="head">Header row, column 1
(header rows optional)</th>
<th class="head">Header 2</th>
<th class="head">Header 3</th>
<th class="head">Header 4</th>
</tr>
</thead>
<tbody valign="top">
<tr><td>body row 1, column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
</tr>
<tr><td>body row 2</td>
<td colspan="3">Cells may span columns.</td>
</tr>
<tr><td>body row 3</td>
<td rowspan="2">Cells may
span rows.</td>
<td colspan="2" rowspan="2"><ul class="first last simple">
<li>Table cells</li>
<li>contain</li>
<li>body elements.</li>
</ul>
</td>
</tr>
<tr><td>body row 4</td>
</tr>
</tbody>
</table>
<div class="notes">
<p>The markup that generated the above is:</p>
<div class="highlight"><pre>.. class:: example-table

+------------------------+------------+----------+----------+
| Header row, column 1   | Header 2   | Header 3 | Header 4 |
| (header rows optional) |            |          |          |
+========================+============+==========+==========+
| body row 1, column 1   | column 2   | column 3 | column 4 |
+------------------------+------------+----------+----------+
| body row 2             | Cells may span columns.          |
+------------------------+------------+---------------------+
| body row 3             | Cells may  | - Table cells       |
+------------------------+ span rows. | - contain           |
| body row 4             |            | - body elements.    |
+------------------------+------------+---------------------+
</pre></div>
<p>We assume that the styling on the table is applied through a custom CSS file that was linked using the <tt class="docutils literal"><span class="pre">cssfile</span></tt> directive. The CSS code would look like this:</p>
<div class="highlight"><pre><span class="nt">table</span><span class="nc">.example-table</span> <span class="p">{</span>
    <span class="k">border-collapse</span><span class="o">:</span> <span class="k">collapse</span><span class="p">;</span>
    <span class="k">background-color</span><span class="o">:</span> <span class="nb">white</span><span class="p">;</span>
    <span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="nb">black</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">table</span><span class="nc">.example-table</span> <span class="nt">th</span> <span class="p">{</span>
    <span class="k">background-color</span><span class="o">:</span> <span class="nb">blue</span><span class="p">;</span>
    <span class="k">border</span><span class="o">:</span> <span class="m">4px</span> <span class="k">solid</span> <span class="nb">black</span><span class="p">;</span>
    <span class="k">color</span><span class="o">:</span> <span class="nb">white</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">table</span><span class="nc">.example-table</span> <span class="nt">td</span> <span class="p">{</span>
    <span class="k">padding</span><span class="o">:</span> <span class="m">0</span> <span class="m">5px</span> <span class="m">0</span> <span class="m">5px</span><span class="p">;</span>
    <span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="nb">black</span><span class="p">;</span>
    <span class="p">}</span>
</pre></div>
</div>
</div>
<div class="section">
<h1>Images</h1>
<img alt="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"/>
<img alt="http://images.amazon.com/images/P/B000EUKRVI.01.LZZZZZZZ.jpg" src="http://images.amazon.com/images/P/B000EUKRVI.01.LZZZZZZZ.jpg"/>
<div class="notes">
<p>The markup that generated the above is:</p>
<div class="highlight"><pre><span class="p">..</span> <span class="ow">image</span><span class="p">::</span> <span class="k">http://www.google.cn/intl/zh-CN/images/logo_cn.gif</span>

<span class="p">..</span> <span class="ow">image</span><span class="p">::</span> <span class="k">http://images.amazon.com/images/P/B000EUKRVI.01.LZZZZZZZ.jpg</span>
</pre></div>
</div>
</div>
<div class="section">
<h1>Raw HTML</h1>
<p style="border: 5px dashed #222; padding: 20px;           background-color: #fff; font-weight: bold">
    <span style="color:#0039b6; font-size:2em">&#20320;</span>
    <span style="color:#c41200; font-size:2.5em">&#22909;</span>
    <span style="color:#f3c518; font-size:3em">&#33437;</span>
    <span style="color:#0039b6; font-size:3.5em">&#21152;</span>
    <span style="color:#30a72f; font-size:4em">&#21733;</span>
</p><div class="notes">
<p>The markup that generated the above is:</p>
<div class="highlight"><pre>.. raw:: html

    &lt;p style="border: 5px dashed #222; padding: 20px;
              background-color: #fff; font-weight: bold"&gt;
        &lt;span style="color:#0039b6; font-size:2em"&gt;&#20320;&lt;/span&gt;
        &lt;span style="color:#c41200; font-size:2.5em"&gt;&#22909;&lt;/span&gt;
        &lt;span style="color:#f3c518; font-size:3em"&gt;&#33437;&lt;/span&gt;
        &lt;span style="color:#0039b6; font-size:3.5em"&gt;&#21152;&lt;/span&gt;
        &lt;span style="color:#30a72f; font-size:4em"&gt;&#21733;&lt;/span&gt;
    &lt;/p&gt;
</pre></div>
</div>
</div>
<div class="section">
<h1>Command Line Usage</h1>
<div class="highlight"><pre>Usage: starscream.py action
actions:
    all
      Generate files for both slides and handout

    slides
      Generate the files slides.html and slides.js

    handout
      Generate the handout.html file

    project
      Create the directory structure and initial files for a new
      presentation project
</pre></div>
</div>
<div class="section">
<h1>Look Ma, It's Unicode!</h1>
<ul class="simple">
<li>Python &#26159;&#26368;&#22909;&#30340;&#32232;&#31243;&#35486;&#35328;&#65281;</li>
<li>Pythonas yra &#382;aviausia &#353;neka</li>
<li>&#1055;&#1080;&#1090;&#1086;&#1085; &#1077; &#1085;&#1072;&#1081;-&#1076;&#1086;&#1073;&#1088;&#1080;&#1103; &#1087;&#1088;&#1086;&#1075;&#1088;&#1072;&#1084;&#1077;&#1085; &#1077;&#1079;&#1080;&#1082;!</li>
<li>A&#353; m&#279;gstu &#353;okolad&#261;</li>
<li>&#54028;&#51060;&#50028;&#51008; &#52572;&#44256;&#51032; &#54532;&#47196;&#44536;&#47000;&#48141; &#50616;&#50612;&#51060;&#45796;!</li>
<li>&#1055;&#1080;&#1090;&#1086;&#1085; - &#1083;&#1091;&#1095;&#1096;&#1080;&#1081; &#1103;&#1079;&#1099;&#1082;</li>
<li>&#1087;&#1088;&#1086;&#1075;&#1088;&#1072;&#1084;&#1084;&#1080;&#1088;&#1086;&#1074;&#1072;&#1085;&#1080;&#1103;!</li>
</ul>
</div>
<div class="section">
<h1>Limitations</h1>
<ul class="simple">
<li>Display issues in Internet Explorer (surprise, surprise)<ul>
<li>Bullet points are rendered very small</li>
<li>Gradients do not work</li>
</ul>
</li>
<li>No markup allowed in slide headers</li>
</ul>
</div>

</body>
</html>
